import React, { Fragment } from 'react';
import { Card, Empty } from 'antd';
import ReactEcharts from '@/components/Echarts';
import Locale from '@/utils/locale';
// import colors from '@/theme';
import styles from './index.less';

const { locale } = new Locale('stat.report');

const getOption = (value, name) => {
    let color;
    if (name === '工作日') {
        color = '#1890FF';
    } else if (name === '节假日') {
        color = '#FAD337';
    } else if (name === '休息日') {
        color = '#F2637B';
    }
    return {
        title: {
            left: `${25 - 0.5}%`,
            top: '64%',

            textAlign: 'center',
            textStyle: {
                fontSize: '12',
                color: '#687284',
                fontWeight: '400'
            }
        },
        series: {
            type: 'pie',
            radius: ['50', '65'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [
                {
                    value,
                    name,
                    itemStyle: {
                        normal: {
                            color
                        }
                    },
                    label: {
                        normal: {
                            show: false
                        }
                    }
                },
                {
                    value: 100 - value,
                    name: '占位',
                    tooltip: {
                        show: false
                    },
                    itemStyle: {
                        normal: {
                            color: '#dfdfdf'
                        }
                    },
                    label: {
                        normal: {
                            formatter: `{b|${name}}\n{a|${value}%}`,
                            textStyle: {
                                color: '#333',
                                rich: {
                                    b: {
                                        color: 'rgba(0, 0, 0, 0.45)',
                                        lineHeight: 30
                                    },
                                    a: {
                                        color: 'rgba(0, 0, 0, 0.85)',
                                        fontSize: 24
                                    }
                                }
                            }
                        }
                    }
                }
            ]
        }
    };
};

const CqlFx = ({ data }) => {
    const {
        holidaysOverNum = 0,
        holidaysOverTime = 0,
        holidaysOverTimeRate = 0,
        restOverSum = 0,
        restOverTime = 0,
        restOverTimeRate = 0,
        workOverNum = 0,
        workOverTime = 0,
        workOverTimeRate = 0,
        workSumNum = 0,
        workSumTime = 0
    } = data;
    const empty = workSumTime === 0 && workSumNum === 0;
    return (
        <Card
            bordered={false}
            className={styles.jbCard}
            title={locale('jblxfx')}
        >
            {empty ? (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            ) : (
                <Fragment>
                    <div className="descriptionText">
                        <span>
                            加班总时长<em>{workSumTime}</em>小时
                        </span>
                        <span>
                            加班总人数<em>{workSumNum}</em>人
                        </span>
                    </div>
                    <ul className={styles.bottomText}>
                        <li>
                            <ReactEcharts
                                option={getOption(workOverTimeRate, '工作日')}
                                style={{ height: 170 }}
                            />
                            <div className={styles.description}>
                                <div>时长：{workOverTime} 小时</div>
                                <div>人数：{workOverNum}人</div>
                            </div>
                        </li>
                        <li>
                            <ReactEcharts
                                option={getOption(
                                    holidaysOverTimeRate,
                                    '节假日'
                                )}
                                style={{ height: 170 }}
                            />
                            <div className={styles.description}>
                                <div>时长：{holidaysOverTime} 小时</div>
                                <div>人数：{holidaysOverNum}人</div>
                            </div>
                        </li>
                        <li>
                            <ReactEcharts
                                option={getOption(restOverTimeRate, '休息日')}
                                style={{ height: 170 }}
                            />
                            <div className={styles.description}>
                                <div>时长：{restOverTime} 小时</div>
                                <div>人数：{restOverSum}人</div>
                            </div>
                        </li>
                    </ul>
                </Fragment>
            )}
        </Card>
    );
};

export default CqlFx;
